<template>
<div class="bg-white">
    <div class="bg-toolbar">
        <DatePicker :value="value2" format="yyyy/MM/dd" type="daterange" placement="bottom-end" placeholder="Select date" style="width: 200px"></DatePicker>
        &nbsp;&nbsp;&nbsp;
        <Button type="primary" icon="ios-search">搜索</Button>

    </div>
    <Table :columns="columns1" :data="data1"></Table>
    <div style="padding-top:20px">
        <Page :total="100" show-sizer />
    </div>

</div>

</template>

<script>
// import echarts from 'echarts'
import { getNowDate, formatDate } from '../../libs/tools'
export default {
  data () {
    return {
      height1: 500,
      value2: [getNowDate(), getNowDate()],
      dom2: null,
      columns1: [
        {
          title: '时间',
          key: 'name'
        },
        {
          title: '新增用户',
          key: 'age'
        },
        {
          title: '1天后',
          key: 'age'
        },
        {
          title: '2天后',
          key: 'age'
        },
        {
          title: '3天后',
          key: 'age'
        },
        {
          title: '4天后',
          key: 'age'
        },
        {
          title: '5天后',
          key: 'age'
        },
        {
          title: '6天后',
          key: 'age'
        },
        {
          title: '7天后',
          key: 'age'
        },
        {
          title: '14天后',
          key: 'age'
        },
        {
          title: '30天后',
          key: 'age'
        }
      ],
      data1: [
        {
          name: 'John Brown',
          age: 18,
          address: 'New York No. 1 Lake Park',
          date: '2016-10-03'
        },
        {
          name: 'Jim Green',
          age: 24,
          address: 'London No. 1 Lake Park',
          date: '2016-10-01'
        },
        {
          name: 'Joe Black',
          age: 30,
          address: 'Sydney No. 1 Lake Park',
          date: '2016-10-02'
        },
        {
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park',
          date: '2016-10-04'
        }
      ]
    }
  },
  methods: {

    resize () {
      this.dom2.resize()
    },
    getData (d1, d2) {
      const xData = []
      for (let i = 0; i < 24; i++) {
        xData.push(i)
      }
      const option = {
        legend: {},
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          top: '10%',
          left: '1.2%',
          right: '1%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: xData
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            type: 'line',
            stack: '总量',
            areaStyle: { normal: {
              color: '#BAD9FF'
            } },
            data: d2
          }

        ]
      }
      return option
    },
    switchDataType (type) {
      const dataMap = [
        [
          [27, 358, 278, 234, 290, 330, 310, 290, 130, 310, 290, 330, 310, 100, 90, 290, 330, 310, 1, 290, 330, 310, 100, 100],
          [120, 132, 101, 134, 90, 230, 210, 100, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 90, 230, 210]
        ],
        [
          [157, 358, 278, 234, 290, 330, 310, 290, 330, 310, 290, 330, 310, 100, 90, 290, 330, 310, 1, 290, 330, 310, 100, 110],
          [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 90, 230, 210]
        ]
      ]
      this.dom2.setOption(this.getData(...dataMap[type]))
    }
  },
  mounted () {

  }

}
</script>
<style>
.bg-white{
 background: #fff;
 padding:30px;
}
.bg-toolbar{
    padding-bottom: 30px;
}
</style>
